<template>
    <div>
        <!-- vant 弹框组件，也可自定义弹框 -->
        <el-dialog v-model="isShowSlide" :visible.sync="isShowSlide" @close="$emit('update:dialogChild', false)">
            <div class="contantBox">
                <p>安全验证</p>
                <slide-verify :l="canvas.l" :r="canvas.r" :w="canvas.w" :h="canvas.h" ref="slideblock" @again="onAgain"
                    @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :accuracy="3"
                    :imgs="imgs" slider-text="拖动滑块完成拼图">
                </slide-verify>
                <!-- 耗时 -->
                <div>{{ timeDate }}</div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            timeDate: "", //耗时
            canvas: {
                l: 50, //滑动碎片的大小
                r: 10, //滑动碎片的圆角
                w: 880, //画布的宽
                h: 360, //画布的高
            },
            isShowSlide: false, //弹框显隐
            // imgs:[],
            imgs: [
                // 将assets中的yzm图片全部引入到数组中
                require("@/assets/yzm1.jpg"),
                require("@/assets/yzm2.jpg"),
                require("@/assets/yzm3.jpg"),
                require("@/assets/yzm4.jpg"),
                require("@/assets/yzm5.jpg"),
                require("@/assets/yzm6.jpg"),
                require("@/assets/yzm7.jpg"),
                // require("@/assets/yzm8.png"),
                // require("@/assets/yzm9.png"),
                // require("@/assets/yzm10.png"),
            ], //自定义的随机图片
            timer: null, //定时器
        };
    },
    props: {
        dialogChild: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        dialogChild: {
            handler(newName, oldName) {
                this.isShowSlide = newName;
            },
            deep: true,
        },
    },
    methods: {
        // async getImgs(){
        //     // 获取图片
        //     const res = await this.axios.get("/yzmimgs");
        //     console.log(res);


        //     // 将图片地址赋值给imgs数组
        //     // this.imgs = res.data;
        // },
        // 返回时间参数，单位为毫秒
        onSuccess(times) {
            this.$emit("login", true);

            this.timeDate = "验证通过，耗时" + (times / 1000).toFixed(1) + "s";
            // 成功后关闭弹框
            this.timer = setInterval(() => {
                this.isShowSlide = false;
            }, 1000);

        },
        // 验证不通过时的回调函数
        onFail() {
            this.$emit("login", false);
            console.log("验证不通过");
            this.timeDate = "";
        },
        // 点击刷新按钮后的回调函数
        onRefresh() {
            this.$emit("refreshOn");
            console.log("点击了刷新图标");
            this.timeDate = "";
        },
        // 刷新成功之后的回调函数
        onFulfilled() {
            this.$emit("fulfilledOn");
            console.log("刷新成功");
        },
        // 检测到非人为操作滑动时触发的回调函数
        onAgain() {
            this.$emit("againOn");
            console.log("检测到非人为操作的哦");
            // 刷新
            this.$refs.slideblock.reset();
        },
        // 父组件调用刷新方法（每次进来重置组件）
        handleClick() {
            this.$nextTick(() => {
                this.timeDate = "";
                clearInterval(this.timer);//清除定时器
                this.$refs.slideblock.reset();
            });
        },
    },
    mounted() {
        // this.getImgs();
    },
};
</script>
<style scoped>
p {
    display: flex;
    justify-content: center;
    font-size: 15px;
    margin: 8px 0px;
}

.contantBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding: 0px 8px 8px 8px; */
}
</style>